<template>
  <view >
    <view id="page" style="min-height: 100%;background:#f12416; ">
      <headBar title="抽奖" color="#f12416"></headBar>
      <view class="pond-head" v-on:click="init">
        <img src="http://cdn.quick365.cn/zl/lottery/pond-head.png" alt="">
      </view>
      <view class="container-out">
        <view class="container-in">
          <view class="content-out" v-for="(box,index) in list"
                :style="{left:box.left+'px',top:box.top+'px','background-color':index==indexSelect?colorAwardSelect:colorAwardDefault}">
            <image class="pond-name-img" :src="box.image_url" alt=""></image>
            <view class="pond-name">{{box.name}}</view>
          </view>
        </view>
        <view class="start-btn" v-on:click="startBtn">
          <image src="http://cdn.quick365.cn/zl/lottery/pond-button.png" style="height:80px;width:100%;" alt=""></image>
          <image src="http://cdn.quick365.cn/zl/lottery/pond-cj.png" :style="{'top':btntop+'px'}"
                 style="position:absolute;left:5px;height:68px;width:89px;top:0;" alt=""></image>
        </view>
        <view class="circle" v-for="(item,index) in circleList"
              :style="{'top':item.topCircle+'px','left':item.leftCircle+'px','background-color':index%2==0?colorCircleFirst:colorCircleSecond}">
        </view>
      </view>
      <view class="prize" v-show="prize==1">
        <view class="prize-box">
          <image class="prize-img" src="http://cdn.quick365.cn/zl/lottery/pond-success.png" alt=""></image>
          <view class="prize-msg">
            <view>恭喜</view>
            <view>抽中{{prize_name}}</view>
            <view class="continue" v-on:click="conTinue">继续抽奖</view>
          </view>
        </view>
      </view>
      <view class="prize" v-show="prize==2">
        <view class="prize-box">
          <image class="prize-img2" src="http://cdn.quick365.cn/zl/lottery/pond-empty.png" alt=""></image>
          <view class="prize-msg">
            <view>谢谢参与</view>
            <view>再换个姿势抽奖</view>
            <view class="continue" v-on:click="conTinue">继续抽奖</view>
          </view>
        </view>
      </view>
      <view></view>
      <xToastCommon v-if="DialogShow" :isShow="DialogShow"  @hideDialog="handleChangeDialogShow">
        <view class="uni-flex uni-row" style="background: #FFFFFF;border-radius: 10rpx;width:90%;margin: 0rpx auto;">
          <view class="flex-item" style="width:10%;"></view>
          <view class="flex-item" style="width:40%;text-align: center;">
            <image src="~@/static/app_image/ylq.png" style="width:60%;height:180rpx;" mode="aspectFit"></image>
          </view>
          <view class="flex-item" style="width:40%;text-align: left;">
            <view style="margin-top:40rpx;font-weight: bold;color:#d30000;">{{DialogTitle}}</view>
            <view>{{DialogMsg}}</view>
          </view>
        </view>
      </xToastCommon>
      <bootNav nav="task"></bootNav>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      DialogShow:false,
      DialogTitle:'',
      DialogMsg:'',
      list: [
        {id: 1, type: 1, name: '100金币', image_url: '../../static/app_image/coinsLittle.png'},
        {id: 2, type: 2, name: '谢谢参与', image_url: '../../static/app_image/thanks.png'},
        {id: 3, type: 1, name: '200金币', image_url: '../../static/app_image/coinsLittle.png'},
        {id: 4, type: 1, name: '300金币', image_url: '../../static/app_image/coinsLittle.png'},
        {id: 5, type: 1, name: '400金币', image_url: '../../static/app_image/coinsLittle.png'},
        {id: 6, type: 2, name: '谢谢参与', image_url: '../../static/app_image/thanks.png'},
        {id: 7, type: 1, name: '1000金币', image_url: '../../static/app_image/coinsLittle.png'},
        {id: 8, type: 1, name: '500金币', image_url: '../../static/app_image/coinsLittle.png'},

      ],
      circleList: [],
      colorCircleFirst: "#F12416",
      colorCircleSecond: "#FFFFFF",
      colorAwardDefault: "#F5F0FC",
      colorAwardSelect: "#ffe400",
      btntop: 0,//按钮的样式
      time: '',//定时器
      indexSelect: 0,//奖品下标
      lottert: 0,//中奖下标
      prize: 0,//是否中奖
      prize_name: '',//奖品名字
      men: false,
    }
  },
  onLoad: function (option) {
    // this.x_out();
    this.init();
  },
  methods: {
    init: function () {
      var ts = this;
      var list = this.list;
      var left = 9;
      var top = 9;

      for (var i = 0; i < 8; i++) {
        if (i == 0) {
          left = 4;
          top = 9;
        } else if (i < 3 && i != 0) {
          top = top;
          left = left + 98 + 4;
        } else if (i >= 3 && i < 5) {
          left = left;
          top = top + 79 + 4;
        } else if (i >= 5 && i < 7) {
          left = left - 98 - 4;
          top = top;
        } else if (i >= 7 && i < 8) {
          left = left;
          top = top - 79 - 4;
        }
        list[i].top = top;
        list[i].left = left;
      }
      this.list = list;
      var cleft = 0;//e
      var ctop = 0;//a
      var dian = [];
      for (var j = 0; j < 24; j++) {
        if (j == 0) {
          cleft = 4;
          ctop = 4;
        } else if (j < 6) {
          ctop = 2;
          cleft += 55;
        } else if (j == 6) {
          ctop = 2;
          cleft = 330;
        } else if (j < 12) {
          ctop += 46;
          cleft = 331.5;
        } else if (j == 12) {
          ctop = 272.5;
          cleft = 330;
        } else if (j < 18) {
          ctop = 275;
          cleft -= 55;
        } else if (j == 18) {
          ctop = 273;
          cleft = 5;
        } else {
          if (!(j < 24)) return;
          ctop -= 46, cleft = 2.5;
        }
        dian.push({
          topCircle: ctop,
          leftCircle: cleft
        })
      }

      this.circleList = dian;
      setInterval(function () {
        if (ts.colorCircleFirst == "#FFFFFF") {
          ts.colorCircleFirst = "#F12416";
          ts.colorCircleSecond = "#FFFFFF";
        } else {
          ts.colorCircleFirst = "#FFFFFF";
          ts.colorCircleSecond = "#F12416";
          ts.btntop = 0;
        }
      }, 900)
      this.time = setInterval(function () {
        if (ts.btntop == 0) {
          ts.btntop = -3;
        } else {
          ts.btntop = 0;
        }
      }, 900)
    },
    startBtn: function (e) {
      var t = this;
      if(!t.isLock()){
        t.alertMsg('每日5次机会','明天继续哦~');
        return;
      }
      clearInterval(this.time);
      this.men=true;
      this.btntop = 0;
      this.lottert = 0;
      var ts = this;
      var i = this.indexSelect;
      var list = this.list;
      var time = null;
      var s = 0;

      time = setInterval(function () {
        i++;
        i %= 8;
        s += 30;
        ts.indexSelect = i;
        if (ts.lottert > 0 && i + 1 == ts.lottert) {
          clearInterval(time);
          ts.time = setInterval(function () {
            if (ts.btntop == 0) {
              ts.btntop = -3;
            } else {
              ts.btntop = 0;
            }
          }, 900);
          if (list[i].type == 2) {
            ts.prize = 2;
            ts.setLock(0);
          } else {
            ts.prize_name = list[i].name;
            ts.prize = 1;
            var prize_name = ts.prize_name;
            var coins = prize_name.replace("金币", "");
            ts.setLock(coins);
          }

        }
      }, 200 + s);

      setTimeout(function () {
        ts.lottert = ts.randomNum(1, 8);
      }, 2e3);

    },
    randomNum: function (minNum, maxNum) {
      switch (arguments.length) {
        case 1:
          return parseInt(Math.random() * minNum + 1, 10);
          break;
        case 2:
          return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
          break;
        default:
          return 0;
          break;
      }
    },
    conTinue:function(){
      this.men=false;
      this.prize=0;
    },
    isLock(){
      var t = this;
      var LotteryNum = t.getLock();
      if(LotteryNum >= 5){
        return false;
      }else{
        return true;
      }
    },
    getLock(){
      var t = this;
      var key = 'xLockLottery';
      var LotteryNum = t.xCacheGet(key);
      if(!LotteryNum){
        LotteryNum = 0;
      }
      return LotteryNum;
    },
    setLock(coins){
      var t = this;
      var key = 'xLockLottery';
      var LotteryNum = t.getLock();
      var tomorrow = new Date();
      tomorrow.setDate(tomorrow.getDate() + 1);
      tomorrow.setHours(0, 0, 0, 0);
      var tomorrowTimestamp = tomorrow.getTime();
      var timestamp = Date.now();
      t.xCacheSet(key,LotteryNum+1,(tomorrowTimestamp-timestamp)/1000);
      if(coins > 0){
        t.userCoinsRecord(coins,'抽奖赢金币');
      }
    },
    handleChangeDialogShow(){
      var t = this;
      t.DialogShow = !t.DialogShow;
    },
    alertMsg(title,msg){
      var t =this;
      t.DialogTitle = title;
      t.DialogMsg = msg;
      t.DialogShow = true;
    }
  }
}
</script>

<style lang="scss">
@import "./lottery.css";
</style>
